logo shbet

Product description



　　Web-app đang là một trong những công cụ vô cùng đắc lực của doanh nghiệp trong việc quản lý nguồn lực nội bộ bởi tận dụng được sự phát triển của khoa học dữ liệu. Thay vì sử dụng các tài liệu giấy hoặc những phần mềm offline để lưu trữ và quản lý dữ liệu, các doanh nghiệp đang dần chuyển hướng sang các phần mềm thông minh hơn. Trong bài viết này, CO-WELL Asia sẽ mang đến hướng dẫn thiết kế web-app để bạn có thể dễ dàng hình dung được quy trình tạo nên loại phần mềm này.

　　Trước hết, chúng ta sẽ cùng tìm hiểu những thông tin cơ bản như: Web-app là gì? Có những công dụng như thế nào? Web-app có gì khác với website hay không?

　　Web-app là một một chương trình máy tính cho phép tương tác, được xây dựng bằng các ngôn ngữ web (HTML, CSS, JS), với chứng năng lưu trữ (các data, các loại file) và xử lý dữ liệu. Web-app thường được một nhóm hoặc một người dùng sử dụng để thực hiện các tác vụ qua internet.

　　Đây là định nghĩa đơn giản nhất về web-app, bạn có thể tìm hiểu ở bài viết này để đọc thêm định nghĩa web-app, sự khác nhau giữa website và web-app (một nhầm lẫn khá phổ biến), cũng như cách thức mà chương trình này hoạt động.

　　Đọc thêm: QUY TRÌNH THIẾT KẾ WEB APP

　　Trước khi bắt tay vào xây dựng web-app, nhà phát triển cần phải chuẩn bị một số kiến thức chuyên môn như sau:Ngôn ngữ back-end (ví dụ: Python, Ruby) – kiểm soát cách web-app hoạt độngNgôn ngữ front-end (HTML, CSS, Javascript) – liên quan đến giao diện, hiển thị cho web-appDevOps (Github, Jenkins) – Triển khai / lưu trữ web-app

　　Còn bây giờ, hãy tìm hiểu quy trình để tạo nên một web-app nhé.

　　 Bước 1: Lên ý tưởng

　　Trước khi bắt tay vào xây dựng web-app, bạn phải hiểu kỹ về những gì bạn cần làm, bắt đầu với câu hỏi tại sao bạn cần loại ứng dụng này, và sẽ sử dụng nó như thế nào.

　　Ý tưởng xây dựng web-app nên bắt đầu từ một vấn đề nào đó. Ví dụ như với doanh nghiệp, khâu lưu trữ và quản lý thông tin khách hàng chưa được hoàn thiện (không cập nhật, không phân loại, không sắp xếp khoa học để có thể tra cứu). Từ đó, web-app bạn cần xây dựng chính là giải pháp cho vấn đề này của bạn.

　　Bạn cũng nên chú ý tới tính khả thi của ý tưởng. Hãy đặt ra một số câu hỏi như:Những chức năng nào/ những lợi ích gì mà ứng dụng có thể mang lại?Như thế nào là một ứng dụng tốt?Xây dựng ứng dụng này sẽ mất bao nhiêu nguồn lực (thời gian, chí phí, con người)? Liệu tài nguyên hiện tạị của doanh nghiệp có thể đáp ứng được không?

　　Bước 2: Nghiên cứu thị trường

　　Bước thứ hai trong bài hướng dẫn thiết kế web-app này, CO-WELL cho rằng, sau khi đã có ý tưởng cho web-app của mình, việc tiếp theo là nghiên cứu thị trường để biết cần làm gì với sản phẩm của mình.

　　Trước hết, một số thông tin bạn cần nghiên cứu là:Đã có một sản phẩm web-app tương tự trên thị trường chưa?Có đối tượng khách hàng nào sử dụng web-app của bạn không?

　　Nghiên cứu thị trường là một khâu vô cùng quan trọng. Nhiều công ty khởi nghiệp có thể có ý tưởng ban đầu rất hay nhưng vẫn lụi tàn sớm bởi không nghiên cứu thị trường đủ sâu sắc để từ đó tạo ra sản phẩm/ dịch vụ thực sự phù hợp với thị trường.

　　Có một vài công cụ tìm kiếm để bạn có thể tìm ra xem có sản phẩm web-app nào tương tự với sản phẩm không. Một số công cụ được gợi ý là: Google, Patent and trademark search, …Nếu kết quả là có web-app như của bạn rồi thì cũng đừng quá lo lắng về việc bị trùng lặp ý tưởng. Bởi rất có thể đối thủ của bạn đã làm ra sản phẩm như vậy trước, tung ra thị trường và người dùng đã ít nhiều có nhận thức về những web-app có chức năng như vậy. Có thể nói là bạn đã được mở đường, bước tiếp theo là cần chiếm lĩnh thị trường đó.

　　Còn nếu bạn không tìm thấy một web-app nào tương tự, thì rất có thể bạn đang là người tiên phong. Mặt khác, cũng có thể đã từng có sản phẩm tương tự rồi, tuy nhiên lại hoạt động không hiệu quả và đi vào bế tắc.

　　Vì vậy, cách tốt nhất để biết được tiềm năng của thị trường chính là đào sâu tìm hiểu:Thị trường mục tiêu mà web-app của bạn hướng tới

　　Chia sẻ ý tưởng web-app của bạn trên các diễn đàn liên quan đến thị trường mục tiêu của bạn. Nếu bạn biết bất kỳ ai làm việc trong thị trường mục tiêu của mình, hãy giải thích ý tưởng của bạn cho họ. Càng nhiều phản hồi nhân về, bạn càng có được đánh giá khách quan về sản phẩm của mình.Google trend

　　Tìm kiếm xem mức độ quan tâm của thị trường đến sản phẩm của bạn.Công cụ SEO

　　Hãy viết ra danh sách các từ khóa liên quan đến web-app của bạn. Nếu công cụ SEO chỉ ra rằng có rất nhiều người đang tìm kiếm các cụm từ khóa của bạn, thì có một tin vui nhỏ là bạn đã có một thị trường mục tiêu tiềm năng.Social media

　　Tham gia các nhóm qua Twitter / Facebook và trình bày ý tưởng của bạn với thị trường mục tiêu.

　　Đến đây, khi đã hoàn thành các bước trên, bạn sẽ có đủ thông tin để hiểu liệu có thị trường cho sản phẩm của mình hay không.

　　 Bước 3: Xác định các chức năng của web-app

　　Bạn càng thêm nhiều chức năng thì càng mất nhiều thời gian để xây dựng web-app của bạn. Ở bất kỳ bài viết  hướng dẫn thiết kế web-app nào, người viết cũng chia sẻ rằng, một web-app càng mất nhiều thời gian để xây dựng, bạn càng cảm thấy chán nản, giống như lắp ráp một mô hình cầu kỳ quá lâu mà bạn vẫn chưa xong vậy.

　　Ví dụ: Một vài tính năng cơ bản của một ứng dụng CRM đơn giản: Cho phép người dùng:Tạo một tài khoảnLấy lại mật khẩu bị mấtThay đổi mật khẩu của họTạo liên hệ mớiTải lên các liên hệ mớiGán một giá trị cho danh bạViết ghi chú dưới danh bạGắn nhãn một liên hệ là khách hàng tiềm năng, khách hàng hoặc cộng tác viênLọc địa chỉ liên hệ theo khách hàng tiềm năng, khách hàng hoặc cộng tác viênXem tổng giá trị của khách hàng tiềm năng, khách hàng và cộng sự

　　 Bước 4: Phác thảo

　　Phác thảo wireframes của giao diện người dùng web-app của bạn. Đây chỉ là bản phác thảo nên bạn có thể tự do sáng tạo nhé.

　　Khi phác thảo, hãy xem xét những điều sau:Dẫn hướng (navigation)Tính thương hiệuCấu trúc của trangCác button trên trangCác yếu tố tương tác

　　Hãy phác thảo ra nhiều phiên bản giao diện web-app của bạn, hình dung xem các chức năng mà bạn muốn đưa vào sẽ ảnh hướng thế nào tới web-app.

　　Sau khi phác thảo ứng dụng của bạn, đã đến lúc chuyển sang bước 5: lên kế hoạch

　　 Bước 5: Lên kế hoạch cho quy trình làm việc của web-app

　　Để tạo được một quy trình hoàn hảo nhất cho web-app, việc bạn cần làm là đặt mình vào vị trí của người dùng. Trong bước 5 của bài hướng dẫn thiết kế web-app, CO-WELL sẽ gợi ý quy trình làm việc cho web-app của bạn.

　　Hãy quay lại và xem xét bước 2 – nghiên cứu thị trường của bạn. Bạn nên tìm kiếm những sản phẩm web-app của đối thủ và đăng ký dùng thử. Sau đó bạn hãy take note những điều bạn cho là tốt và không tốt ở những sản phẩm này, đặc biệt là quy trình làm việc của những web-app đó.

　　Sau khi bạn phân tích xong các web-app của đối thủ cạnh tranh, đã đến lúc viết ra các quy trình công việc khác nhau cho ứng dụng của bạn. Hãy xem xét các điểm sau:Làm thế nào để người dùng đăng ký?Họ có nhận được email xác minh không?Làm thế nào để người dùng đăng nhập?Người dùng thay đổi mật khẩu của họ như thế nào?Cách người dùng điều hướng trong ứng dụngNgười dùng thay đổi cài đặt của họ như thế nào?Cách người dùng trả tiền cho ứng dụngLàm cách nào để người dùng hủy đăng ký của họ?

　　Thế còn với một web-app có nhiều trang, thay vì tất cả thao tác đều trên một trang thì sao? Hãy viết danh sách tất cả các trang khác nhau mà web-app của bạn sẽ có. Từ đó, bạn sẽ hình dung được các trạng thái khác nhau của các trang. Ví dụ, trang chủ sẽ có hai trạng thái; đăng nhập và đăng xuất. Người dùng đã đăng nhập sẽ thấy một trang khác với người dùng đã đăng xuất.

　　Đọc thêm: QUY TRÌNH THIẾT KẾ WEB APP

　　 Bước 6: Thiết kế (Wireframing / Protopyping)

　　Wireframing là quá trình lên một bản thiết kế cho web-app. Còn prototyping đưa wireframing lên một bước xa hơn – thêm một màn hình tương tác.

　　Quyết định làm wireframe hay prototype là tùy thuộc vào bạn. Nhưng nhìn chung, đây là yêu tố không thể thiếu nó sẽ giúp bạn hình dung được cách bày trí giao diện để làm việc với web-app dễ dàng hơn.

　　Bạn có thể tạo wireframe/prototype bằng cách sử dụng các công cụ sau:Sketch (macOS)InVision Studio (macOs)Adobe XD (macOS, Windows)Figma (Web, macOS, Windows, Linux)Balsamiq (macOS, Windows, Web)

　　 Bước 7: Thử nghiệm và nhận phản hồi

　　Sau khi đã có một bản wireframe/prototype đẹp mắt để mô tả trực quan web-app của bạn, hãy đưa bản thiết kế này ra với người dùng thử. Ở giai đoạn này, hãy thu thập những phản hồi có tính xây dựng.

　　Một số lưu ý trong quá trình dùng thử web-appBắt đầu từ số lượng người dùng thử nhỏ.Truy cập các diễn đàn của khách hàng mục tiêu (tệp khách hàng mà bạn đã có khi nghiên cứu thị trường) như: Group Facebook, các forum, gửi email marketing chào mời dùng thử.Cho dù chỉ là quá trình thử nghiệm, bạn vẫn luôn cố gắng xây dựng mối quan hệ tốt với người dùng bởi họ chính là khách hàng tiềm năng nhất khi web-app của bạn chính thức “lên kệ.”

　　Giờ thì bạn đã nhận được phản hồi vô cùng có giá trị. Đã đến lúc bắt đầu xây dựng web-app của bạn.

　　 Bước 8: Khởi công xây dựng – bắt đầu với cơ sở dữ liệu (database)

　　Cơ sở dữ liệu là gì?

　　Cơ sở dữ liệu đơn giản là một tập hợp dữ liệu. Dữ liệu có thể được lưu trữ vào đĩa hoặc trong bộ nhớ trên máy chủ hoặc cả hai. Bạn có thể tạo một thư mục trên ổ cứng, lưu trữ một vài tài liệu và gọi nó là cơ sở dữ liệu.

　　Hệ thống quản lý cơ sở dữ liệu là một hệ thống cung cấp cho bạn các API nhất quán để:Tạo, cập nhật và xóa cơ sở dữ liệuĐọc và ghi dữ liệu vào cơ sở dữ liệuTruy cập an toàn vào cơ sở dữ liệu bằng cách cung cấp quyền truy cập nhiều cấp độ vào các khu vực và chức năng khác nhauDữ liệu bạn cần lưu trữ và những gì người dùng của bạn cần làm, sẽ xác định loại cơ sở dữ liệu cần thiết để chạy web-app của bạn.

　　Các loại cơ sở dữ liệu

　　Có nhiều loại cơ sở dữ liệu cho nhiều mục đích khác nhau. Web-app thường sử dụng một trong những loại sau:

　　SQL

　　Bạn nên sử dụng cơ sở dữ liệu SQL nếu dữ liệu của bạn có liên quan mật thiết đến nhau. Dữ liệu của bạn được coi là có liên quan đến nhau khi bạn có nhiều loại hồ sơ xác định rõ có mối quan hệ giữa chúng. Ví dụ: “Khách hàng” có thể có nhiều “Hóa đơn” được lưu trữ trong hồ sơ. Thông thường, bạn sẽ tạo bảng Khách hàng và bảng Hóa đơn – bảng này có thể được liên kết với nhau. Ví dụ. Customer.Id = Invoice.CustomerId.

　　Cơ sở dữ liệu SQL sở hữu ngôn ngữ truy vấn cực kỳ mạnh mẽ cho phép bạn trình bày dữ liệu của mình theo tất cả các cách. MySQL, Postgresql, Microsoft SQLServer là một số ngôn ngữ phổ biến nhất – cùng với nhiều dịch vụ hiện đại hơn.

　　Documents database

　　Bạn nên sử dụng document database nếu dữ liệu của bạn không liên quan đến nhau nhiều. Document database lưu trữ “tài liệu”. Mỗi bản ghi trong cơ sở dữ liệu của bạn là một khối dữ liệu có cấu trúc lớn – thường ở định dạng JSON.

　　Ví dụ về một số loại document database là: MongoDb, CouchDb, Firebase (serverless), Dynamo Db (AWS).

　　Tách các cơ sở dữ liệu như thế nào?

　　Mỗi khách hàng sẽ có một tập dữ liệu riêng. Một trong những điều tồi tệ nhất là để dữ liệu của một khách hàng bị rò rỉ ra ngoài. Ngay cả khi chỉ có một lượng nhỏ dữ liệu bị rò rỉ, và các dữ liệu này không nhạy cảm,  không có thiệt hại nào xảy ra, thì một sự cố này cũng là giảm đi đáng kể lòng tin của khách hàng vào tính bảo mật web-app của bạn.

　　Bạn phải xây dựng một chiến lược vững chắc để tách biệt dữ liệu khách hàng của mình để đảm bảo rằng điều này không bao giờ xảy ra.

　　Bạn có hai lựa chọn – Tách vật lý và Tách logic.

　　Tách biệt vật lý

　　Mỗi khách hàng của bạn có một cơ sở dữ liệu riêng (mặc dù có thể chia sẻ một máy chủ cơ sở dữ liệu với những người khác). Điều này khiến việc mắc lỗi dẫn đến rò rỉ dữ liệu trở nên khó khăn hơn nhiều. Một số đặc điểm của việc tách biệt cơ sở dữ liệu theo cách này:Ưu điểm:An toàn nhấtCó thể mở rộng hơnNhược điểm:Quản lý, bảo trì và nâng cấp phức tạp hơnViệc truy vấn tất cả dữ liệu khách hàng của bạn cùng nhau khó hơn

　　Ví dụ: liệt kê tất cả Hóa đơn trong cơ sở dữ liệu sẽ chỉ trả lại Hóa đơn cho một trong các khách hàng của bạn. Để nhận hóa đơn của Khách hàng khác, bạn cần kết nối với cơ sở dữ liệu khác.

　　Vì mỗi dữ liệu của khách hàng của bạn đều nằm trong cơ sở dữ liệu riêng, nên bạn có thể dễ dàng truyền tải tất cả chúng trên nhiều máy chủ cơ sở dữ liệu mà không cần phải “phân bổ”. Ứng dụng của bạn sẽ dễ dàng mở rộng hơn nhiều theo cách này.Một số loại mã bạn sẽ cần viết:hơo một máy khách mới, bạn cần tạo một cơ sở dữ liệu mới và điền vào bất kỳ dữ liệu gốc nào.Bạn cần lưu trữ ở đâu đó tất cả các khách hàng của mình và cách kết nối với cơ sở dữ liệu của từng khách hàng.Nếu bạn cần nâng cấp cơ sở dữ liệu của mình (ví dụ: thêm bảng mới), bạn cần viết mã để nâng cấp từng bảng riêng biệt.Nếu bạn cần truy vấn tất cả dữ liệu của khách hàng thành một, bạn cần lấy dữ liệu ra khỏi từng dữ liệu và tổng hợp lại.

　　Tách biệt logic

　　Giả sử dữ liệu về tất cả các khách hàng của bạn được lưu trữ trong một cơ sở dữ liệu khổng lồ. Mỗi khi bạn cần lấy dữ liệu cho một máy khách, bạn cần bao gồm một bộ lọc cho máy khách. Ví dụ. ‘Chọn’ từ những khách hàng có customerClientId = 1234 ”. Đặc điểm của tách biệt logic:Ưu điểm:Bắt đầu dễ dàng hơnDễ dàng bảo trì và nâng cấp hơnCó thể dễ dàng truy vấn tất cả dữ liệu khách hàng của bạn bằng một truy vấnNhược điểm:Dễ mắc lỗi dẫn đến vi phạm dữ liệuKhó mở rộng quy mô hơn

　　Bước 9: Xây dựng Front-end

　　Trên thực tế, ta sẽ xây dựng Front-end và Back-end cùng lúc với nhau. Nhưng trong bài viết hướng dẫn thiết kế web-app này này, chúng ta sẽ tìm hiểu về frontend trước.

　　Frontend (giao diện người dùng) là phần tử trực quan của web-app của bạn. Nó xác định những gì bạn nhìn thấy và tương tác. Giao diện người dùng được phát triển với HTML, CSS và JavaScript. Nếu sử dụng các trang máy chủ, việc bắt đầu rất dễ dàng. Backend framework của bạn đã được thiết lập xong và sẵn sàng xây dựng.

　　SPA phức tạp hơn một chút. Đầu tiên, bạn cần thiết lập môi trường phát triển của mình. Các thành phần của môi trường này sẽ là:Trình chỉnh sửa mã, chẳng hạn như VS Code, Sublime TextPackaging frameworkWebpackGulpGruntFrontend framework (nên sử dụng, trừ khi bạn đã có nhiều kinh nghiệp phát triển):ReactEmberVueSvelte

　　Định cấu hình packaging tool của bạn để giao tiếp với với phần backend – thường chạy trên một cổng khác trên localhost. Bạn có thể hiện bằng cách sử dụng proxy HTTP của Node.Bước 10: Xây dựng backend

　　Bước thứ 10 trong bài hướng dẫn thiết kế web-app này là xây dựng backend. Đây là một khâu vô cùng quan trọng bởi backend chính là thứ quản lý dữ liệu của bạn. Điều này đề cập đến cơ sở dữ liệu, máy chủ và mọi thứ mà người dùng không thể thấy trong web-app.

　　Khi xây dựng web-app của mình, bạn cần chọn giữa:Trang Máy chủ (Ứng dụng Nhiều Trang)Ứng dụng trang đơn

　　Các công việc chính của backend sẽ là:Cung cấp HTTP endpoint cho frontend, cho phép nó hoạt động trên dữ liệu của bạn. Ví dụ. Tạo, đọc, cập nhật và xóa bản ghiXác thực người dùngỦy quyền: Khi người dùng đã đăng nhập đưa ra yêu cầu, backend sẽ xác định xem họ có được phép (được ủy quyền) thực hiện hành động được yêu cầu hay không.Phục vụ frontend

　　Nếu bạn đã chọn Trang máy chủ, backend của bạn cũng sẽ tạo frontend và phục vụ người dùng.

　　Với một ứng dụng trang đơn, backend sẽ chỉ phân phát các tệp frontend tĩnh của bạn (tức là “Trang đơn” của bạn và các nội dung liên quan của nó).

　　Quản lý Đăng nhập / Người dùng:Người dùng sẽ xác thực như thế nào?Tên người dùng và mật khẩu?Mở ID (tức là đăng nhập bằng Google, FB, v.v.)Bạn sẽ tạo những cấp độ người dùng nào trong hệ thống?

　　Bạn thường sẽ cần tạo nhiều môi trường. Ví dụ:Thử nghiệm – cho tất cả các tính năng phát triển mới nhất.Beta – cung cấp các bản phát hành sớm cho khách hàng.Sản phẩm – Hệ thống trực tiếp của bạn.

　　Hosting là gì?

　　Hosting liên quan đến việc chạy web-app của bạn trên một máy chủ cụ thể. Bạn có thể làm theo những bước sau:Mua miềnMua / Thiết lập chứng chỉ SSLChọn một nhà cung cấp Cloud:

　　Amazon

　　MS Azure

　　Nền tảng đám mây của GoogleBước 12 – Triển khai

　　Bạn đã có ý tưởng của mình, xác thực nó, thiết kế và phát triển ứng dụng web và chọn nhà cung cấp dịch vụ hosting. Bây giờ bạn đang ở bước cuối cùng của bài viết hướng dẫn thiết kế web-app: triển khai.

　　Các công cụ phát triển sau cung cấp khả năng tích hợp liên tục và sẽ giúp bạn triển khai ứng dụng web lên dịch vụ lưu trữ đám mây của bạn:GitLabBitbucketsJenkins

　　Để bắt đầu, bạn chỉ có thể triển khai trực tiếp từ máy tính của mình.

　　Trên đây là hướng dẫn thiết kế web-app do CO-WELL tổng hợp. Hy vọng bài viết này đã cung cấp cho bạn những thông tin cần thiết để bạn có thể đào sâu hơn trong quá trình chinh phục loại phần mềm vô cùng thú vị này.

　　CO-WELL Asia là đơn vị chuyên cung cấp dịch vụ phát triển website và phần mềm. Với kinh nghiệm hơn 10 năm phát triển cho các khách hàng Việt Nam, Nhật Bản,…CO-WELL tự tin sẽ mang lại dịch vụ, sản phẩm tốt nhất để các khách hàng doanh nghiệp có thể tận dụng lợi thế của công nghệ thông tin trong việc nâng cao doanh số, quản lý nguồn lực nội bộ.

　　Nếu bạn có nhu cầu xây dựng website, phần mềm, đừng ngần ngại LIÊN HỆ với CO-WELL để được tư vấn hoàn toàn miễn phí!

　　Đọc thêm: QUY TRÌNH THIẾT KẾ WEB APP